<template>
  <div class="contact">
    <el-table :data="recordsData">
      <!--通话记录列表-->
      <el-table-column :label="$t('common.name')" min-width="150" prop="name"></el-table-column>
      <el-table-column :label="$t('common.mobileNumber')" width="180" prop="phone"></el-table-column>
      <el-table-column :label="$t('common.time')" width="180" prop="callTime">
        <template slot-scope="scope">{{ scope.row.callTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
      </el-table-column>
      <el-table-column :label="$t('audit.contactDuration')" width="150" prop="duration"></el-table-column>
      <el-table-column :label="$t('common.type')" width="180" prop="type">
        <template slot-scope="scope">{{ scope.row.type | switchType }}</template>
      </el-table-column>
    </el-table>
    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';

  let that = null;

  export default {
    name: 'contact',
    components: {
      Pagination
    },
    props: {
      userId: {
        default: ''
      }
    },
    mixins: [mixin],
    data() {
      return {
        recordsData: [],
      };
    },
    methods: {
      getTableData(page = this.page) {
        const params = {
          userId: this.userId,
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
        };
        this.$api.audit.getCallRecords(params).then((res) => {
          const { status, data, error } = res;
          this.recordsData = [];
          if (status === '1' && error === '00000000') {
            this.recordsData = data.data;
            this.setPage(data.page, this.page);
          }
        });
      }
    },
    filters: {
      switchType(type) {
        switch (+type) {
            case 1:
                return that.$t('audit.reception');
            case 2:
                return that.$t('audit.send');
            case 3:
                return that.$t('audit.notGet');
          default:
            return '';
        }
      }
    },
    created() {
      that = this;
      this.getTableData();
    }
  };
</script>

<style lang="scss" scope>
  //
</style>
